<template>
  <div class="person-detail-container">
    <NavBar>
      <template #default> 个人详情 </template>
    </NavBar>

    <div v-if="isLoading" class="loading-state">
      <el-spinner />
      <span>加载中...</span>
    </div>

    <div v-else-if="!userStore.userInfo || !userStore.userInfo.userId" class="empty-state">
      <el-empty description="用户信息未找到或未登录" />
      <el-button type="primary" @click="goToLogin">去登录</el-button>
    </div>

    <div v-else class="detail-content">
      <div class="avatar-section">
        <img
          v-if="userStore.userInfo.avatar"
          :src="userStore.userInfo.avatar"
          alt="用户头像"
          class="user-avatar"
        />
        <el-icon v-else class="user-avatar-placeholder">
          <User />
        </el-icon>
        <span class="avatar-tip">我的头像</span>
      </div>

      <div class="info-list">
        <div class="info-item">
          <span class="label">账号</span>
          <span class="value">{{ userStore.userInfo.userName || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">性别</span>
          <span class="value">{{ formatGender(userStore.userInfo.gender) }}</span>
        </div>
        <div class="info-item">
          <span class="label">密码</span>
          <span class="value">********</span>
        </div>
        <div class="info-item">
          <span class="label">手机号</span>
          <span class="value">{{ formatPhoneNumber(userStore.userInfo.mobile) }}</span>
        </div>
        <div class="info-item">
          <span class="label">邮箱</span>
          <span class="value">{{ formatEmail(userStore.userInfo.email) }}</span>
        </div>
      </div>

      <div class="action-list">
        <div class="action-item" @click="goToEditProfile">
          <span class="item-left">
            <el-icon><Edit /></el-icon>
            <span>编辑资料</span>
          </span>
          <el-icon><ArrowRight /></el-icon>
        </div>
        <div class="action-item" @click="goToChangePassword">
          <span class="item-left">
            <el-icon><Key /></el-icon>
            <span>修改密码</span>
          </span>
          <el-icon><ArrowRight /></el-icon>
        </div>
        <!-- <div class="action-item" @click="goToAccountSecurity">
          <span class="item-left">
            <el-icon><ShieldCheck /></el-icon>
            <span>账号安全中心</span>
          </span>
          <el-icon><ArrowRight /></el-icon>
        </div> -->
      </div>

      <div class="logout-section">
        <el-button type="danger" plain class="logout-button" @click="handleLogout">
          注销账号
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import NavBar from "../../components/common/NavBar.vue";
import {
  User,
  ArrowRight,
  Edit,
  Key,
  ShieldCheck,
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { ElMessage, ElSpinner, ElEmpty, ElButton } from "element-plus"; // 导入新增的组件

const userStore = useUserStore();
const router = useRouter();

const isLoading = ref(true); // 控制加载状态

onMounted(async () => {
  // 模拟数据加载，实际应用中这里应该调用API获取最新用户信息
  // 例如：await userStore.fetchUserInfo();
  // 为了演示，这里假设 userStore.userInfo 已经通过 localStorage 加载
  // 或者您可以在此处调用一个API来获取最新的用户数据
  if (!userStore.userInfo || !userStore.userInfo.userId) {
    // 可以在这里尝试重新获取用户数据，例如：
    // try {
    //   await userStore.loadUserInfoFromBackend(); // 假设有这个方法
    // } catch (error) {
    //   console.error("Failed to load user info:", error);
    //   ElMessage.error("获取用户信息失败，请稍后重试。");
    // }
    console.log("用户信息缺失，可能需要重新加载或引导登录。");
  }
  isLoading.value = false; // 数据加载完毕
});

// 格式化性别显示
const formatGender = (genderCode) => {
  switch (genderCode) {
    case 1:
      return "男";
    case 2:
      return "女";
    case 0:
      return "保密";
    default:
      return "未设置"; // 或者可以返回空字符串
  }
};

// 格式化手机号，中间部分显示星号
const formatPhoneNumber = (phone) => {
  if (!phone) {
    return "未绑定";
  }
  // 确保手机号是11位数字，并进行脱敏
  if (phone.length === 11 && /^\d+$/.test(phone)) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }
  return phone; // 如果格式不符，则原样返回
};

// 格式化邮箱，@前部分显示星号，保留首尾字符
const formatEmail = (email) => {
  if (!email) {
    return "未绑定";
  }
  const atIndex = email.indexOf('@');
  if (atIndex > 0) {
    const prefix = email.substring(0, atIndex);
    const domain = email.substring(atIndex);
    if (prefix.length <= 2) { // 如果前缀太短，直接显示部分或全部星号
      return '*'.repeat(prefix.length) + domain;
    }
    // 保留第一个和最后一个字符，中间用星号代替
    return prefix.charAt(0) + '****' + prefix.charAt(prefix.length - 1) + domain;
  }
  return email; // 如果没有'@'（不应该发生对于有效邮箱），则原样返回
};

// 导航功能
const goToEditProfile = () => {
  // ElMessage.info("跳转到编辑资料页面"); // 生产环境通常移除此类提示
  router.push('/edit-profile');
};

const goToChangePassword = () => {
  // ElMessage.info("跳转到修改密码页面"); // 生产环境通常移除此类提示
  router.push('/change-password');
};

const goToAccountSecurity = () => {
  // ElMessage.info("跳转到账号安全中心页面"); // 生产环境通常移除此类提示
  router.push('/account-security');
};

const goToLogin = () => {
  router.push('/login');
};

// 处理注销功能
const handleLogout = () => {
  // TODO: 在这里实现注销逻辑
  // 1. 调用后端API进行注销（如果需要）
  // 2. 清除本地存储的用户信息（如 localStorage, sessionStorage 或 Pinia store 中的状态）
  //    例如: userStore.clearUserInfo(); // 假设您的 userStore 有一个清除用户信息的 action
  // 3. 重定向到登录页面或首页
  //    例如: router.push('/login');
  ElMessage.info("注销功能待实现"); // 临时提示
  console.log("注销按钮被点击，待实现注销逻辑。");
};
</script>

<style scoped>
.person-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 加载状态和空状态样式 */
.loading-state, .empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 100px); /* 减去NavBar的高度 */
  text-align: center;
}
.loading-state span {
  margin-top: 10px;
  color: #666;
}
.empty-state .el-button {
  margin-top: 20px;
}


.detail-content {
  padding: 15px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #eee;
}

.user-avatar-placeholder {
  font-size: 80px;
  color: #ccc;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-tip {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.info-list,
.action-list {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-size: 15px;
  color: #333;
  flex-shrink: 0;
}

.info-item .value {
  font-size: 15px;
  color: #666;
  text-align: right;
  flex-grow: 1;
  margin-left: 15px;
  word-break: break-all;
}

.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.action-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333;
}

.item-left .el-icon {
  margin-right: 10px;
  color: #ff5000;
}

.action-item .el-icon {
  color: #999;
}

/* 注销按钮样式 */
.logout-section {
  padding: 15px;
  background-color: #f5f5f5; /* 与背景色一致，让按钮看起来浮动在底部 */
  text-align: center; /* 按钮居中 */
}

.logout-button {
  width: 100%; /* 按钮宽度占满父容器 */
  max-width: 300px; /* 设置最大宽度，避免在大屏幕上过宽 */
  height: 45px; /* 设置按钮高度 */
  font-size: 16px; /* 调整字体大小 */
}
</style>